<template>
	<view>
		<view class="go-home" @click="backHome">
			<image :src="imglink + 'home/home-Selected.png'" mode=""></image>
		</view>
		<view>
			<view class="form-gather">
				<view class="">{{ title }}</view>
				<!-- #ifdef MP-WEIXIN -->
					<button open-type="share" type="default">邀请员工参与活动</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
					<view class="" @click="inviteStaff">邀请员工参与活动</view>
				<!-- #endif -->
			</view>
			<scroll-view 
				scroll-y="true" 
				:style="'height:'+height+'px'" 
				scroll-with-animation  
				@scrolltolower="LoadingMore"
			>
				<view class="act-participant">
					<view class="act-participant-title">
						本活动参与人员
					</view>
					<view class="act-participant-msg">
						<view class="">头像/昵称</view>
						<view class="">加入时间</view>
						<view class="">操作</view>
					</view>
					<view class="" v-if="employees.length!=0">
						<view 
							class="act-participant-content" 
							
							v-for="(employee,index) in employees" 
							:key='index'
						>
							<view class="act-participant-basics">
								<image :src="employee.avatar" mode=""></image>
								<text class="name">{{employee.name}}</text>
							</view>
							<view class="act-participant-details">
								<text>{{employee.date_added}}</text>
								<!-- 如果employ数组的长度为0，则是没有权限，恢复权限 -->
								<view v-if="employee.status == 0" class="act-participant-operation cancel-operation" @click="handleUpdateStatus(index,employee)">
									恢复权限
								</view>
								<!-- 如果employ数组有值，则有权限，取消权限 -->
								<view v-else class="act-participant-operation" @click="handleUpdateStatus(index,employee)">
									取消权限
								</view>
							</view>
						</view>
						
					</view>
					<view v-else style="maring:30rpx auto;font-size:28rpx;color:#ccc;text-align: center;">
						<text>暂无员工参与</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share">
				<image class="popup_box_close_share" :src="imglink + 'share_tip.png'"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//#ifdef H5	
	import wx from '@/common/wx-js-sdk.js'
	//#endif
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import Clipboard from 'clipboard'
	export default{
		components:{uniPopup},
		data(){
			return {
				imglink: this.$store.state.imgLink,
				height:0,
				store_id:0,
				collect_info_id:0,
				title: '',
				page:1,
				pagesize:10,
				lastPage:1,
				data:null,
				employees:[],
				store_info:'',
			}
		},
		onLoad(options) {
			console.log(options,'optionsoptionsoptionsoptions');
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height;
			let store_id = parseInt(options.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id');
			}else{
				uni.setStorageSync('store_id', store_id);
			}
			this.store_id = store_id;
			this.$store.commit('updateStoreId',store_id);
			
			this.collect_info_id = parseInt(options.id,10);
			
			document.title = '信息表单收集员工管理';
			if (/ip(hone|od|ad)/i.test(navigator.userAgent)) {
				var i = document.createElement('iframe');
				i.src = '/favicon.ico';
				i.style.display = 'none';
				i.onload = function() {
					setTimeout(function(){
						i.remove();
					}, 1)
				}
				document.body.appendChild(i);
			}
			
		},
		onShareAppMessage(res) {
			let _self = this
			return {
				title: _self.store_info.nickname + '邀请您加入' +  _self.title + '活动', // 分享描述
				path: '/pages/memberCenter/specialGroup/invite/inviteStaff?store_id=' + 
					_self.$store.getters.getStoreId + '&actId=' + _self.collect_info_id + 
					'&customer_id=' + _self.store_info.customer_id + '&page_type=actDown', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imageUrl: _self.cover_image, // 分享图标
			}
		},
		onShow(){
			
			//获取信息表单信息与员工
			this.getCollectInfoAndEmployees();
		},
		methods:{
			
			//返回首页
			backHome(){
				uni.navigateTo({
					url:'/pages/home/home?store_id=' + this.store_id
				})
			},
			
			// 获取收集表单信息与该表单员工
			getCollectInfoAndEmployees(){
				let data = {
					token: this.$store.getters.getToken,
					page: this.page,
					pagesize: this.pagesize,
					store_id:this.$store.getters.getStoreId,
					collect_info_id:this.collect_info_id
				}
				const that=this;
				console.log(data,'getCollectInfoAndEmployees');
				this.$api.get_collect_info_and_join_employee(data).then(res => {
					console.log(res,'get_collect_info_and_join_employee')
					if(res.status){
						const data = res.data;
						that.lastPage = data.total_page;
						that.title = data.title;
						that.cover_image = data.cover_image;
						that.employees = data.employees;
						// this.lastPage = res.data.last_page
						// console.log(this.permission_list,'111111111111 ')
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 上拉加载更多
			LoadingMore(){
				// console.log("上拉加载更多数据....")
				this.page++
				if(this.page<=this.lastPage){
					const that = this;
					let data = {
						token: this.$store.getters.getToken,
						page: this.page,
						pagesize: this.pagesize,
						store_id:this.$store.getters.getStoreId,
						collect_info_id:this.collect_info_id,
					}
					
					this.$api.get_collect_info_and_join_employee(data).then(res=>{
						console.log(res,'get_collect_info_and_join_employee_load_more')
						if(res.status){
							const data = res.data;
							that.employees = that.employees.concat(data.employees);
						}
					}).catch(err => {
						console.log(err)
					})
					
				}else{
					uni.showToast({
						title:'没有更多了',
						icon:'none',
						duration:2000
					})
				}
			},
			
			//分享弹遮罩层
			share(){
				this.$refs.shareTip.open()
			},
			
			//邀请员工
			inviteStaff(){
				const _self = this
				
				const data = {
					token:this.$store.getters.getToken,
					customer_store_id:this.store_id
				}
				
				this.$api.getCustomerInfo(data).then(res => {
					
					if(!res.status){
						return false
					}
					
					const store_info = res.data.userinfo
					_self.store_info = store_info
					// 进行签名的时候  Android 不用使用之前的链接， ios 需要
					let signLink = /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl;
					let data = {
						token:_self.$store.getters.getToken,
						url:signLink
					}
					
					this.$api.gain_share_data(data).then( res => {
						const shareConfig = JSON.parse(res.data)
						
						console.log(shareConfig,'share res.data')
						this.$refs.shareTip.open()
						wx.config(shareConfig)
						wx.ready(function(){
							
							wx.checkJsApi({
								jsApiList: [
									'updateTimelineShareData',
									'updateAppMessageShareData',
									'onMenuShareAppMessage',
									'onMenuShareTimeline'
								],
								success: function(res) {
									console.log('接口检测成功:'+res);
								},
								error: function(err) {
									console.log('接口检测失败:'+err);
								}
							})
							
							const shareData = {
								title: _self.title, // 分享标题
								desc:  store_info.nickname + '邀请您加入' +  _self.title + '活动', // 分享描述
								link: _self.current_url()+'/pages/memberCenter/specialGroup/invite/inviteStaff?store_id=' + _self.$store.getters.getStoreId + '&actId=' + _self.collect_info_id + '&customer_id=' + store_info.customer_id + '&page_type=actDown', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: _self.cover_image, // 分享图标
								success: function (res) {
								  console.log(res,'success ---')
								},
								fail:function(err){
									console.log(err.errMsg,'fail ---')
								}
							}
							
							
							wx.updateAppMessageShareData(shareData);
							wx.updateTimelineShareData(shareData);
						})
						wx.error(function(res){
							console.log(res,'wx.error')
						})					
					}).catch( err => {
						
						console.log(err)
					})
					
				}).catch( err => {
					console.log(err)
				})
			},
			
			// 权限更新
			handleUpdateStatus(index,employee){
				const that = this;
				const status = Math.abs(employee.status-1);
				console.log(employee,'changePermission');
				let data = {
					token: this.$store.getters.getToken,
					store_id: employee.store_id,
					collect_info_employee_id: employee.collect_info_employee_id,
					status,
				}
				
				employee.status = status;
				
				this.$api.update_collect_info_employee_status(data).then(res => {
					
					console.log(res,'change_employee_permission');
					if(res.status){
						
						that.employees.splice(index,1,employee)
						
					}
					
					uni.showToast({
						title:res.msg,
						icon:'none',
						duration:2000
					})
					
				}).catch(err => {
					console.log(err)
				})
				
			},
		}
	}
</script>

<style>
	.go-home{
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		position: fixed;
		border: 1upx solid #DEDEDE;
		bottom: 50upx;right: 50upx;
		z-index: 999;
	}
	.go-home>image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.popup_box_de_share{
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share{
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;right: 10upx;
	}
	page{
		background: #F3F3F4;
	}
	.form-gather,.form-num{
		width: 100%;
		padding: 0 30upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	.form-gather>view:first-child,.form-num-title{
		padding: 30upx 0;
		box-sizing: border-box;
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
		color: #333333;
		font-size: 34upx;
	}
	.form-gather>view:last-child,.derived-form{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 36upx;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.form-gather>button{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 36upx;
		font-size: 32upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.act-participant{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.act-participant-title{
		color: #333333;
		font-size: 30upx;
	}
	.act-participant-msg{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		padding: 0 36upx 0 20upx;
		box-sizing: border-box;
		background: #F4F5F9;
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
	}
	.act-participant-msg>view{
		color: #999999;
		font-size: 28upx;
	}
	.act-participant-content{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	
	.act-participant-content:last-child{
		border-bottom: none;
	}
	
	.act-participant-basics{
		display: flex;
		flex-grow: 1;
	}
	.act-participant-basics>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.act-participant-basics>text{
		display: inline-block;
		margin-left: 20upx;
		line-height: 80upx;
		color: #333333;
		font-size: 28upx;
	}
	.act-participant-details{
		display: flex;
		flex-grow: 2;
		justify-content: space-between;
	}
	.act-participant-details>text{
		color: #666666;
		font-size: 28upx;
		line-height: 80upx;
	}
	.act-participant-operation{
		width: 128upx;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		border: 1upx solid #666666;
		border-radius: 4upx;
		color: #666666;
		font-size: 24upx;
		margin-top: 18upx;
	}
	.cancel-operation{
		color: #FF8B46;
		border-color: #FF8B46;
	}
	.form-num-content{
		text-align: center;
		margin-top: 28upx;
	}
	.form-num-content>view:first-child{
		color: #333333;
		font-size: 48upx;
	}
	.form-num-content>view:last-child{
		color: #999999;
		font-size: 22upx;
		margin-top: 6upx;
	}
	.collect-form-details{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 20upx;
	}
	.collect-form-details>view{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
		color: #333333;
		font-size: 30upx;
	}
	.staff_msg_content{
		width: 100%;
		padding: 20upx 30upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.staff_msg_top{
		display: flex;
		justify-content: space-between;
	}
	.staff_msg_top>view:first-child{
		display: flex;
	}
	.staff_msg_top>view>image,.salesman-msg>view>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.staff_msg_top>view>text{
		display: inline-block;
		color: #333333;
		font-size: 28upx;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.staff_msg_top>view:last-child{
		color: #666666;
		font-size: 28upx;
		line-height: 80upx;
	}
	.staff_msg_phone{
		display: flex;
		justify-content: space-between;
	}
	.staff_msg_phone>view:first-child{
		color: #666666;
		font-size: 28upx;
		margin-left: 100upx;
		line-height: 50upx;
	}
	.staff_msg_phone>view:last-child{
		width: 130upx;
		height: 50upx;
		line-height: 50upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 24upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 4upx;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.patriarch-child-msg{
		width: 100%;
		/* height: 100upx; */
		/* line-height: 100upx; */
		background: #F4F5F9;
		margin-top: 30upx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30upx 56upx 10upx 44upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	.patriarch-child-msg>view{
		width: 50%;
		color: #666666;
		margin-bottom: 20upx;
	}
	.patriarch-child-msg>view>text{
		color: #333333;
		font-weight: 800;
	}
	.salesman-msg{
		display: flex;
		justify-content: space-between;
		margin-top: 30upx;
	}
	.salesman-msg>view:last-child{
		color: #000000;
		font-size: 24upx;
		line-height: 80upx;
	}
	.salesman-msg>view:first-child{
		display: flex;
	}
	.salesman-msg>view>text{
		color: #333333;
		font-size: 28upx;
		display: inline-block;
		line-height: 80upx;
		margin-left: 20upx;
	}
	.salesman-msg>view>view{
		width: 80upx;
		height: 28upx;
		line-height: 28upx;
		text-align: center;
		border: 1upx solid #FF8B46;
		color: #FF8B46;
		font-size: 22upx;
		margin-top: 28upx;
		margin-left: 14upx;
	}
	
	.act-participant-basics .name{
		width: 100upx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
